<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/punlun.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/header.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        button{
            position: relative;
            background-color: rgba(0,0,0,0);
            width: 30px;
            height: 30px;
            top: 30px;
            border: 0;
        }
    </style>
</head>
<body>
<div id="header">
    <img class="i1" src="../jp/捕获1.PNG" alt="">
    <div id="logo">
        <h1> <a  class="a2"  href="/index.html">A.S Hair Salon
        </a>

        </h1>
    </div>
    <div id="login_reg">
        <a  href="#" @click="fn1()">退出</a>
    </div>
</div>
    <div id="mian">
            <div class="content">
                <div id="title"><h1>热卖区</h1></div>
                <div class="content_child">
                    <span class="span1"><img src="https://assets.nightcherry.com/cms/upload/300075/5f315ed925ae4.png" alt="商品图片"></span>
                    <textarea class="span2" placeholder="评论区"></textarea>
                    <span class="span3"><button @click="number" ><img src="jp/10.jpg" alt="点赞"></button><p v-text="num"></p></span>
                </div>
                <div class="content_child">
                    <span class="span1"><img src="https://cbu01.alicdn.com/img/ibank/O1CN01yqgijO1II2pJ2m6a1_!!6000000000869-0-cib.jpg?_=2020" alt="商品图片"></span>
                    <textarea class="span2"  placeholder="评论区"></textarea>
                    <span class="span3"><button @click="number1"><img src="jp/10.jpg" alt="点赞"></button><p v-text="num1"></p></span>
                </div>
                <div class="content_child">
                    <span class="span1"><img src="https://cbu01.alicdn.com/img/ibank/O1CN01Pd8jOG1WnYivpWV1R_!!2201211862833-0-cib.jpg?_=2020" alt="商品图片"></span>
                    <textarea class="span2"  placeholder="评论区"></textarea>
                    <span class="span3"><button @click="number2"><img src="jp/10.jpg" alt="点赞"></button><p v-text="num2"></p></span>
                </div>
                <div class="content_child">
                    <span class="span1"><img src="https://cbu01.alicdn.com/img/ibank/2020/787/225/21938522787_1359032752.jpg?_=2020" alt="商品图片"></span>
                    <textarea class="span2"  placeholder="评论区"></textarea>
                    <span class="span3"><button @click="number3"><img src="jp/10.jpg" alt="点赞"></button><p v-text="num3"></p></span>
                </div>
                <div id="limit">
                    <a href="" class="a3">首页</a>
                    <a href="" class="a3">1</a>
                    <a href="" class="a3">2</a>
                    <a href="" class="a3">下一页</a>
                </div>

            </div>
    </div>
        <div id="footer">
        <div class="foot_t">
            <div id="zuo_boby">
                <h2 id="ft_title">A.S Hair Salon</h2>
                <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                    Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
                </p>
                <h3>Trusted by<span style="color: orange">500+ People</span></h3>
                <img src="jp/微信.webp" alt="" class="tubiao">
                <img src="jp/qq.webp" alt="" class="tubiao">
            </div>
        </div>
        <div class="foot_t">
            <div id="mid_boby">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="" class="lianjie">>>&nbspHome</a></li>
                    <li><a href="" class="lianjie">>>&nbspAbout Us</a></li>
                    <li><a href="" class="lianjie">>>&nbspSingle Page</a></li>
                    <li><a href="" class="lianjie">>>&nbspTeam</a></li>
                    <li><a href="" class="lianjie">>>&nbspContact Us</a></li>
                </ul>
            </div>
        </div>
        <div class="foot_t">
            <div id="you_boby">
                <h4>Contact Info</h4>
                <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
                <p id="id2">电话:+1(12) 123 456 789</p>
                <p id="id3">座机:+1(12) 123 456 789</p>
                <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
            </div>
        </div>
    </div>
    </div>
</body>
<script>
    new Vue({
        el:'#mian',
        data: {
            num:'0',
            num1:'0',
            num2:'0',
            num3:'0',
            flag:false,
            flag1:false,
            flag2:false,
            flag3:false
        },
        methods:{
            number:function (){
                this.flag = !this.flag;
                if (this.flag)
                    this.num++
                else
                    this.num--
            },
            number1:function (){
                this.flag1 = !this.flag1;
                if (this.flag1)
                  this.num1++
                else
                    this.num1--
            },  number2:function (){
                this.flag2 = !this.flag2;
                if (this.flag2)
                    this.num2++
                else
                    this.num2--
            },  number3:function (){
                this.flag3 = !this.flag3;
                if (this.flag3)
                    this.num3++
                else
                    this.num3--
            }
        }
    })
</script>
<script src="js/header.js"></script>
</html>